import { IFormProps, size, formItemLayout, getUploadResult, getImages, getFileList, phoneReg } from '../../utils/common';
import React from 'react';
import { Modal, Form, Input, Select, Upload, InputNumber } from 'antd';
import * as api from '../../api/api';
import { FormComponentProps } from 'antd/lib/form';
import Uploads from '../Uploads';
export interface WorkerEditProps extends FormComponentProps {
    visible: boolean,
    worker?: api.SingleUserMallWorkersVOWorkerViewVO,
    onSave: (any) => void,
    onCancel: () => void,
}
class WorkerEdit extends React.PureComponent<WorkerEditProps, any>{
    constructor(props) {
        super(props);
    }

    state = {
        pictures: []
    }

    componentDidMount() {
        const pictures = this.props.worker && this.props.worker.picture;
        this.setState({ pictures: getFileList(pictures) });
    }

    ok = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, form) => {
            if (!err) {
                form['picture'] = getImages(this.state.pictures);
                this.props.onSave(form);
            }
        });
    }

    cancel = () => {
        this.props.onCancel();
    }



    validPhoneNumber = (rule, value, callback) => {
        phoneReg.test(value) ? callback() :  callback('请输入合法的手机号');
    }

    pictureChange = (pictures) => {
        this.setState({ pictures });
    }

    render(): JSX.Element {
        const { getFieldDecorator } = this.props.form;
        const { worker } = this.props;
        return (
            <Modal
                title='安装师傅信息'
                visible={this.props.visible}
                onOk={this.ok}
                onCancel={this.cancel}
                maskClosable={true}
            >
                <Form>
                    <Form.Item {...formItemLayout} >
                        {getFieldDecorator('id', {
                            initialValue: worker && worker.id
                        })(<Input size={size} type="hidden" />)}
                    </Form.Item>
                    <Form.Item label="姓名" {...formItemLayout}>
                        {getFieldDecorator('name', {
                            rules: [
                                {
                                    required: true,
                                    message: '请输入姓名'
                                }
                            ],
                            initialValue: worker && worker.name
                        })(<Input size={size}
                            placeholder="请输入姓名" />)}
                    </Form.Item>
                    <Form.Item label="照片" {...formItemLayout}>
                        {getFieldDecorator('picture', {
                            rules: [{
                                required: true,
                                message: '请上传师傅照片'
                            }
                            ],
                            initialValue: worker && worker.picture
                        })(
                            < Uploads editable={true} fileList={this.state.pictures} onChange={this.pictureChange} />)}
                    </Form.Item>
                    <Form.Item label="手机号" {...formItemLayout}>
                        {getFieldDecorator('phoneNumber', {
                            rules: [
                                {
                                    validator: this.validPhoneNumber
                                },
                                {
                                    required: true,
                                    message: '手机号未填写'
                                }
                            ],
                            initialValue: worker && worker.phoneNumber
                        })(<Input size={size}
                            placeholder="请输入手机号" />)}
                    </Form.Item>
                    <Form.Item label="安装价格" {...formItemLayout}>
                        {getFieldDecorator('price', {
                            rules: [
                                {
                                    required: true,
                                    message: '请输入安装价格'
                                }
                            ],
                            initialValue: worker && worker.price
                        })(<InputNumber size={size} />)}
                    </Form.Item>
                    <Form.Item label="安装量" {...formItemLayout}>
                        {getFieldDecorator('installation', {
                            rules: [
                                {
                                    required: true,
                                    message: '请输入安装量'
                                }
                            ],
                            initialValue: worker && worker.installation
                        })(<InputNumber size={size} />)}
                    </Form.Item>
                    <Form.Item label="工作年数" {...formItemLayout}>
                        {getFieldDecorator('workingYear', {
                            rules: [
                                {
                                    required: true,
                                    message: '请输入工作年数'
                                }
                            ],
                            initialValue: worker && worker.workingYear
                        })(<InputNumber size={size} />)}
                    </Form.Item>
                    <Form.Item label="评论标签" {...formItemLayout}>
                        {getFieldDecorator('tags', {
                            initialValue: worker && worker.tags
                        })(<Input
                            placeholder="请输入评论标签（以空格分割）" />)}
                    </Form.Item>
                </Form>
            </Modal>)
    }
}

export default Form.create()(WorkerEdit);